<template>
  <div>
    <el-dialog
      width="500px"
      :title="$t('上传合同')"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel"
    >
      <el-upload
        class="upload-box"
        :on-change="handleUpload"
        :show-file-list="false"
        :auto-upload="false"
        ref="uploadRef"
        drag
        action=""
        :limit="1"
      >
        <i class="el-icon-upload"></i>
        <div class="">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div>推荐文件格式为: <span style="font-weight: bold">快递公司名+合同</span>, 如: <b>顺丰快递合同</b></div>
      <div slot="footer">
        <el-button @click="cancel">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import request from '@/utils/request'

export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      /**是否正在上传 */
      uploadFlag: false,
      /**待上传列表 */
      waitUploadList: [],
      uploadLoading: false,
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
      }
    },
  },
  methods: {
    /**上传快递公司合同 */
    uploadExpressContract(data) {
      return request({
        url: '/distribution/expressCompany/uploadExpressContract',
        method: 'post',
        data,
        repetitiveConfig: {
          neglectful: true,
          interval: 3000,
        },
      })
    },
    // 上传单个文件
    uploadSingleFile() {
      /**上传结束 */
      if (!this.waitUploadList.length) {
        // 正在上传状态改为false
        this.uploadFlag = false
        this.uploadLoading?.close()
        // 清空已上传的fileList
        this.$refs['uploadRef'].uploadFiles = []
        // this.$message({ type: 'success', message: '上传成功!' })
        this.cancel()
        return
      }
      const formData = new FormData()
      const file = this.waitUploadList.shift()
      formData.append('file', file.raw)
      formData.append('fileName', file.name.split('.')[0])
      formData.append('expressId', this.formData.id)
      this.uploadExpressContract(formData).finally(() => this.uploadSingleFile())
    },
    handleUpload(file) {
      // 如果正在上传中，直接添加到待上传列表中
      if (this.uploadFlag) {
        return this.waitUploadList.push(file)
      }
      this.uploadLoading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
      this.uploadFlag = true
      this.waitUploadList = [file]
      this.uploadSingleFile()
    },

    cancel() {
      this.$emit('update:show', false)
      this.$emit('getList')
    },
  },
}
</script>
<style scoped lang="scss">
.upload-box {
  width: 100%;
  height: 200px;
  ::v-deep .el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
    }
  }
}
</style>
